<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <!--全局通用框架样式 begin-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--/*@thymesVar id="title" type=""*/-->
    <title>汽车信息</title>
    <link href="/coral/images/favicon.ico" rel="icon">
    <link href="/assets/libs/layui/css/layui.css" rel="stylesheet"/>
    <link href="/assets/module/admin.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500,600,700|Old+Standard+TT"
          rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" rel="stylesheet">

    <link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js"></script>
    <script type="text/javascript" src="/coral/js/custom.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <style>
        .iw_poi_title {
            color: #CC5522;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
            padding-right: 13px;
            white-space: nowrap
        }

        .iw_poi_content {
            font: 12px arial, sans-serif;
            overflow: visible;
            padding-top: 4px;
            white-space: -moz-pre-wrap;
            word-wrap: break-word
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <!--                <div class="layui-form-item">-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">车牌号:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="carNumber" class="layui-input" placeholder="请输入车牌号"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">车架号:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="frame" class="layui-input" placeholder="请输入车架号"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">发动机号:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="engine" class="layui-input" placeholder="请输入发动机号"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">车品牌:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="brand" class="layui-input" placeholder="请输入车品牌"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">车型号:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="model" class="layui-input" placeholder="请输入车型号"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">单位id:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="companyId" class="layui-input" placeholder="请输入单位id"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">科室id:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="departmentId" class="layui-input" placeholder="请输入科室id"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">-->
                <!--                        <label class="layui-form-label">状态:</label>-->
                <!--                        <div class="layui-input-inline">-->
                <!--                            <input name="state" class="layui-input" placeholder="请输入状态"/>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="layui-inline">&emsp;-->
                <!--                        <button class="layui-btn icon-btn" lay-filter="searchBtn" lay-submit>-->
                <!--                            <i class="layui-icon">&#xe615;</i>搜索-->
                <!--                        </button>&nbsp;-->
                <!--                        <button shiro:hasPermission="car:export" id="exportBtn" class="layui-btn icon-btn"-->
                <!--                                type="button">-->
                <!--                            <i class="layui-icon">&#xe67d;</i>导出-->
                <!--                        </button>-->
                <!--                    </div>-->
                <!--                </div>-->
            </form>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="chakan">查看</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="formDialog4">
    <!-- 随便定位的地址 -->
    <!--百度地图容器-->
    <div style="width:1000px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="formDialog">
    <form id="dataForm" lay-filter="dataForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">车牌号:</label>
            <div class="layui-input-block">
                <!--                <input name="Platenumber" placeholder="请输入车牌号" class="layui-input"-->
                <!--                       lay-verType="tips" lay-verify="required" required/>-->
                <!--                       lay-verType="tips" lay-verify="required" required/>-->
                <select name="carId"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">GPS设备号:</label>
            <div class="layui-input-block">
                <input name="Macid" placeholder="请输入GPS设备号" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">昵称:</label>
            <div class="layui-input-block">
                <input name="FullName" placeholder="请输入昵称" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="saveBtn" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script>
    layui.use(['layer', 'form', 'upload', 'table', 'util', 'laydate', 'tableX', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var laydate = layui.laydate;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var upload = layui.upload;
        /* 渲染表格 */
        var cols = [
            {type: 'checkbox'},
            {field: 'platenumber', title: '车牌号', align: 'center'},
            {field: 'macid', title: '设备号', align: 'center'},
            {field: 'fullName', title: '昵称', align: 'center'},
            // {field: 'state', title: '状态', align: 'center'},
            {title: '操作', toolbar: '#tableBar', align: 'center', minWidth: 240}
        ];

        var insTb = table.render({
            elem: '#dataTable',
            url: '/Location/selLocationPage',
            page: true,
            toolbar: [shiroToolbar(true, true)].join(''),
            cellMinWidth: 100,
            method: "POST",
            cols: [cols],
            dataType: 'json',
            contentType: 'application/json',
            headers: {"X-Token": C.find("X-Token")},
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.errorCode, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.body.total, //解析数据长度
                    "data": res.body.records //解析数据列表
                };
            },
            request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                ,
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            done: function () {
                // 绑定鼠标右键
                tableX.bindCtxMenu('dataTable', shiroBindCtxMenu(true, true));
            }
        });

        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj.data);
            } else if (obj.event === 'reset') { // 重置密码
                resetPsw(obj);
            } else if (obj.event === 'chakan') {
                showEditModel3(obj.data);
            }
        });

        function showEditModel3(mData) {
            admin.open({
                type: 1,
                area: '800px',
                title: ('查看'),
                content: $('#formDialog4').html(),
                shadeClose: true,
                success: function (layero, dIndex) {
                    window.location.href = "http://www.xybds.xyz/Skins/Xinyuezhilian/?locale=cn&back=true";
                    // $.ajax({
                    //     // url: '/Location/login?loginName=' + mData.macid,
                    //     url: '/Location/getUserAndGpsInfoByIDsUtc?loginName=74037543790',
                    //     type: 'get',
                    //     // data: JSON.stringify(data),
                    //     dataType: 'JSON',
                    //     contentType: 'application/json',
                    //     async: false,
                    //     beforeSend: function (xhr) {
                    //         xhr.setRequestHeader("X-Token", C.find("X-Token"));
                    //     },
                    //     success: function (res) {
                    //         if (res.message == 'success') {
                    //
                    //
                    //         } else {
                    //             layer.msg(res.message);
                    //         }
                    //     }
                    // })
                    //
                    // initMap(); //创建和初始化地图

                }
            });

        }


        function initMap() {
            createMap(); //创建地图
            setMapEvent(); //设置地图事件
            addMapControl(); //向地图添加控件
            addMarker(); //向地图中添加marker
        }

        //创建地图函数：
        function createMap() {
            var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
            //输入要定位地址的经纬度。然后定位到相应地点-
            var point = new BMap.Point(120.24369, 30.318795); //定义一个中心点坐标
            map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map; //将map变量存储在全局
        }

        //地图事件设置函数：
        function setMapEvent() {
            map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
            map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
            map.enableKeyboard(); //启用键盘上下左右键移动地图
        }

        //地图控件添加函数：
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 0
            });
            map.addControl(ctrl_ove);
        }

        //标注点数组
        var markerArr = [{
            title: "桃源里产业园",
            // content: "温州市鹿城区大南路游嬉大楼03-2、04-1",
            content: "杭州市江干区桃源里产业园",
            point: "120.24369|30.318795",
            isOpen: 0,
            icon: {
                w: 21,
                h: 21,
                l: 0,
                t: 0,
                x: 6,
                lb: 5
            }
        }];

        //创建marker
        function addMarker() {
            for (var i = 0; i < markerArr.length; i++) {
                var json = markerArr[i];
                var p0 = json.point.split("|")[0];
                var p1 = json.point.split("|")[1];
                var point = new BMap.Point(p0, p1);
                var iconImg = createIcon(json.icon);
                var marker = new BMap.Marker(point, {
                    icon: iconImg
                });
                var iw = createInfoWindow(i);
                var label = new BMap.Label(json.title, {
                    "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)
                });
                marker.setLabel(label);
                map.addOverlay(marker);
                label.setStyle({
                    borderColor: "#808080",
                    color: "#333",
                    cursor: "pointer"
                });

                (function () {
                    var index = i;
                    var _iw = createInfoWindow(i);
                    var _marker = marker;
                    _marker.addEventListener("click", function () {
                        this.openInfoWindow(_iw);
                    });
                    _iw.addEventListener("open", function () {
                        _marker.getLabel().hide();
                    })
                    _iw.addEventListener("close", function () {
                        _marker.getLabel().show();
                    })
                    label.addEventListener("click", function () {
                        _marker.openInfoWindow(_iw);
                    })
                    if (!!json.isOpen) {
                        label.hide();
                        _marker.openInfoWindow(_iw);
                    }
                })()
            }
        }

        //创建InfoWindow
        function createInfoWindow(i) {
            var json = markerArr[i];
            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
            return iw;
        }

        //创建一个Icon
        function createIcon(json) {
            var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w, json.h), {
                imageOffset: new BMap.Size(-json.l, -json.t),
                infoWindowOffset: new BMap.Size(json.lb + 5, 1),
                offset: new BMap.Size(json.x, json.h)
            })
            return icon;
        }


        /* 表格头工具栏点击事件 */
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showEditModel();
            } else if (obj.event === 'del') { // 删除
                var checkRows = table.checkStatus('dataTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doDel({ids: ids});
            }
        });


        // 显示编辑弹窗
        function showEditModel(mData) {
            admin.open({
                type: 1,
                area: '800px',
                title: (mData ? '修改' : '绑定'),
                content: $('#formDialog').html(),
                shadeClose: true,
                success: function (layero, dIndex) {
                    form.val('dataForm', mData);  // 回显数据
                    $.ajax({
                        url: "/car/selCarList",
                        type: 'post',
                        dataType: 'JSON',
                        contentType: 'application/json',
                        async: false,
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-Token", C.find("X-Token"));
                        },
                        success: function (res) {

                            var data = res.body;
                            if (data) {
                                var html = "<option value=''>请选择车辆</option>";
                                for (var i = 0; i < data.length; i++) {
                                    var tp = data[i];
                                    if (mData) {
                                        if (mData.carId == tp.id) {
                                            html += "<option value='" + tp.carNumber + "'  selected='selected'>" + tp.carNumber + "</option>"
                                        } else {
                                            html += "<option value='" + tp.carNumber + "'>" + tp.carNumber + "</option>"
                                        }
                                    } else {
                                        html += "<option value='" + tp.carNumber + "'>" + tp.carNumber + "</option>"
                                    }
                                }
                                $("[name='carId']").html("");
                                $("[name='carId']").append(html);
                                // $("#shoolId");
                                form.render('select');
                            }
                        }
                    })

                    form.on('submit(saveBtn)', function (data) {
                        var Macid = $("[name='Macid']").val();
                        var Platenumber = $("[name='carId']").val();
                        var FullName = $("[name='FullName']").val();
                        if (mData) {
                            var data = {
                                "Macid": Macid,
                                "id": mData.id,
                                "Platenumber": Platenumber,
                                "FullName": FullName
                            }
                            $.ajax({
                                url: '/Location/update',
                                type: 'get',
                                data: JSON.stringify(data),
                                dataType: 'JSON',
                                contentType: 'application/json',
                                beforeSend: function (xhr) {
                                    xhr.setRequestHeader("X-Token", C.find("X-Token"));
                                },
                                success: function (res) {
                                    if (res.message == 'success') {
                                        layer.msg('修改成功', {icon: 1})
                                        layer.close(dIndex);
                                        // show();
                                        insTb.reload({page: {curr: 1}});
                                        ;
                                    } else {
                                        layer.msg(res.message);
                                    }
                                    //     if (res.code == 0) {
                                    //     layer.close(dIndex);
                                    //     layer.msg(res.msg, {icon: 1});
                                    //     insTb.reload({page: {curr: 1}});
                                    // } else {
                                    //     layer.msg(res.msg, {icon: 2});
                                    // }
                                }
                            })
                        } else {
                            $.ajax({
                                url: '/Location/login',
                                type: 'get',
                                // data: JSON.stringify(data),
                                dataType: 'JSON',
                                contentType: 'application/json',
                                async: false,
                                beforeSend: function (xhr) {
                                    xhr.setRequestHeader("X-Token", C.find("X-Token"));
                                },
                                success: function (res) {
                                    if (res.message == 'success') {
                                        // layer.msg('修改成功', {icon: 1})
                                        // layer.close(dIndex);
                                        // // show();
                                        // insTb.reload({page: {curr: 1}});
                                        // ;
                                    } else {
                                        layer.msg(res.message);
                                    }
                                    //     if (res.code == 0) {
                                    //     layer.close(dIndex);
                                    //     layer.msg(res.msg, {icon: 1});
                                    //     insTb.reload({page: {curr: 1}});
                                    // } else {
                                    //     layer.msg(res.msg, {icon: 2});
                                    // }
                                }
                            })

                            $.ajax({
                                url: '/Location/bindGPS?macid=' + Macid + '&platenumber=' + Platenumber + '&fullName=' + FullName,
                                type: 'get',
                                // data: JSON.stringify(data),
                                dataType: 'JSON',
                                contentType: 'application/json',
                                beforeSend: function (xhr) {
                                    xhr.setRequestHeader("X-Token", C.find("X-Token"));
                                },
                                success: function (res) {
                                    if (res.message == 'success') {
                                        layer.msg('绑定成功', {icon: 1})
                                        layer.close(dIndex);
                                        // show();
                                        insTb.reload({page: {curr: 1}});
                                        ;
                                    } else {
                                        layer.msg(res.message);
                                    }
                                    //     if (res.code == 0) {
                                    //     layer.close(dIndex);
                                    //     layer.msg(res.msg, {icon: 1});
                                    //     insTb.reload({page: {curr: 1}});
                                    // } else {
                                    //     layer.msg(res.msg, {icon: 2});
                                    // }
                                }
                            })
                        }
                        return false;
                    });
                }
            });

            /* 渲染laydate */
            laydate.render({
                elem: '#creDate',
            });
            /* 渲染laydate */
            laydate.render({
                elem: '#updDate',
            });
        }

        /* 表格搜索 */
        form.on('submit(searchBtn)', function (data) {
            if (data.field.dateRange) {
                var searchDate = data.field.dateRange.split(' - ');
                data.field.startDate = searchDate[0];
                data.field.endDate = searchDate[1];
            } else {
                data.field.startDate = '';
                data.field.endDate = '';
            }
            data.field.dateRange = undefined;
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 导出excel */
        $('#exportBtn').click(function () {
            var checkRows = table.checkStatus('dataTable');
            if (checkRows.data.length === 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                tableX.exportDataX({
                    cols: insTb.config.cols,
                    data: checkRows.data,
                    fileName: '导出数据'
                });
            }
        });


        /* 删除 */
        window.doDel = function (obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);

                $.ajax({
                    url: '/car/delete?id=' + obj.id,
                    type: 'post',
                    // data: {"id": obj.id},
                    dataType: 'JSON',
                    contentType: 'application/json',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("X-Token", C.find("X-Token"));
                    },
                    success: function (res) {
                        if (res.message == 'success') {
                            layer.msg('删除成功', {icon: 1})
                            // layer.close(dIndex);
                            // show();
                            insTb.reload({page: {curr: 1}});

                        } else {
                            layer.msg(res.message);
                        }

                    }
                })
            });
        }

        /* 渲染时间选择 */
        laydate.render({
            elem: 'input[name="dateRange"]',
            type: 'date',
            range: true,
            trigger: 'click'
        });
    });
</script>
</body>
</html>